import React, { Component } from 'react'
import styled from 'styled-components'
import { Row, Col, Divider } from 'antd'
import Fire from '@/assets/images/unit_report/fire.png';
import Fault from '@/assets/images/unit_report/fault.png';
import FeedBack from '@/assets/images/unit_report/feedback.png';
import Shield from '@/assets/images/unit_report/shield.png';
import Supervise from '@/assets/images/unit_report/supervise.png';
import { connect } from 'dva';

const Container = styled.div`
  width: 19.04%;
  height: 180px;
  background: rgba(255,255,255,1);
  border-radius: 6px;
`

const MyH4 = styled.h4`
  font-size: ${ props => props.fontSize ? 16 : 14}px;
  color: rgba(0,0,0,0.75);
  line-height: 24px;
  letter-spacing: 1px;
`

interface PropsF {
  data: {
    typeName: string;
    img: any;
    count: number;
    items: Array<any>
  }
}


const Card: React.FC<PropsF> = ({ data = {} }) => {

  return (
    <Container>
      <Row style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <Col span={12} style={{ marginTop: '-9px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div>
            <img src={data?.img} />
            <div style={{ width: '96px', textAlign: 'center', marginTop: '-10px', fontSize: '18px', color: 'rgba(0,0,0,0.85)' }}>
              {data?.typeName} {data?.count}
            </div>
          </div>
          <Divider type="vertical" style={{ height: '100px', color: '#E5E5E5' }} />
        </Col>
        <Col span={12}>
          <Row style={{ marginTop: '16px' }}>
            <Col span={12}>
              {Array.isArray(data.items) && data.items.filter(v => v !== null).map((item, ind) => (
                <MyH4 key={ind}>
                  {FLAG[ind]}
                </MyH4>
              ))}
            </Col>
            <Col span={12}>
              {Array.isArray(data.items) && data.items.filter(v => v !== null).map((item, ind) => (
                <MyH4 fontSize={16} key={ind}>
                  {item}
                </MyH4>
              ))}
            </Col>
          </Row>
        </Col>
      </Row>
    </Container>
  )
}


interface PropsC {
  dispatch?: Function,
  alarmHandleRate?: {},
}

@connect(({ unit_report }) => ({
  alarmHandleRate: unit_report?.alarmHandleRate?.list || []
}))
export default class Cards extends Component<PropsC> {


  componentDidMount() {
    const { dispatch } = this.props
    dispatch({ type: 'unit_report/queryAlarmHandleRate' })
  }

  render() {

    const { alarmHandleRate } = this.props

    const res = Array.isArray(alarmHandleRate) && alarmHandleRate
      .filter((item: any) => +item.type !== 7)
      .map((v: any) => ({
        typeName: v.typeName || '',
        img: IMG[v.type] || Fault,
        count: v.handled + v.unhandled || 0,
        items: [v.handled, v.unhandled, `${v.rate}%`, v.real ? v.real : null],
      }))

    return (
      <>
        {
          Array.isArray(res) && res.map((item: any, ind) => (
            <Card data={item} key={ind} />
          ))
        }
      </>
    )
  }
}





const FLAG = new Proxy({
  0: '已处理',
  1: '未处理',
  2: '处理率',
  3: '真实火警',
}, {
  get(target, props) {
    if (!(props in target)) {
      return {}
    }
    return target[props];
  }
})

const IMG = new Proxy({
  2: Fire,
  3: Fault,
  4: Shield,
  5: FeedBack,
  6: Supervise
}, {
  get(target, props) {
    if (!(props in target)) {
      return {}
    }
    return target[props];
  }
})


const Items = [
  {
    type: '火警',
    img: Fire,
    count: 20,
    items: [20, 0, '100%', 1]
  },
  {
    type: '故障',
    img: Fault,
    count: 200,
    items: [20, 0, '100%']
  },
  {
    type: '反馈',
    img: FeedBack,
    count: 200,
    items: [20, 0, '100%']
  },
  {
    type: '屏蔽',
    img: Shield,
    count: 200,
    items: [20, 0, '100%']
  },
  {
    type: '监管',
    img: Supervise,
    count: 1120,
    items: [20, 0, '100%']
  },
]
